<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/static/style/common.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c_file_upload_div {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .c_uploadfile_label_info {
            margin-left: 100px;
        }

        .c_table th {
            background-color: rgb(230, 230, 230);
            height: 40px;
            font: 16px/40px "Microsoft YaHei UI";
            font-weight: bold;
        }

        .c_table td {
            height: 40px;
            /*width: 200px;*/
            text-align: center;
            vertical-align: middle;
        }

        .c_table .c_ordinal {
            width: 100px;
        }

        .c_table .c_name {
            width: 200px;
        }

        .c_table .c_address {
            width: 200px;
        }

        .c_table .c_imagesid {
            width: 200px;
        }

        .c_table .c_hostname {
            width: 200px;
        }

        .c_table .c_status {
            width: 80px;
        }

        .c_table .c_action {
            width: 120px;
        }

        tr:nth-child(even) {
            background-color: #f5fafe;
        }

        tr:hover {
            background-color: #dafdf3;;
        }

        .c_action_td {
            width: 200px;
        }

        /*普通按钮样式一*/
        .c_action_button_sty_disenabled {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            /*background-color: rgb(200, 200, 200);*/
            border: 1px solid lightpink;
            color: rgb(55, 101, 124);
            outline: none;
        }

        .c_action_button_sty01 {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            background-color: rgb(200, 200, 200);
            border: 1px solid rgb(239, 240, 242);
            text-align: center;
            color: rgb(55, 101, 124);
            outline: none;
        }

        /*普通按钮样式一 hover*/
        .c_action_button_sty01:hover {
            width: 50px;
            height: 30px;
            font: 14px/30px "Microsoft YaHei";
            background-color: rgb(156, 183, 202);
            border: 1px solid rgb(239, 240, 242);
            color: rgb(55, 101, 124);
            text-align: center;
            outline: none;
        }

    </style>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function FileUpload() {
            var form_data = new FormData();
            var file_info = $('#id_file_upload')[0].files[0];
            form_data.append('file', file_info);
            if (file_info == undefined) {
                alert('你没有选择任何文件');
                return false;
            }
            $(".c_uploadfile_label_info").removeClass('class_hide_mask_div');
            $.ajax({
                url: '/upload',
                type: 'POST',
                data: form_data,
                processData: false, //tell jquery not to process the data
                contentType: false, //tell jquery not to set contentType
                success: function (callback) {
                    alert('上传文件完成');
                    $(".c_uploadfile_label_info").addClass('class_hide_mask_div');
                    location.reload();
                },
                error: function () {
                    alert('上传文件失败');
                    $(".c_uploadfile_label_info").addClass('class_hide_mask_div');
                    location.reload();
                }
            });

        }

        $(function () {
            $(".c_action_button_del_image").click(function (event) {
                // 点击删除按钮
                // alert(this.name);
                // alert(this.id);
                // alert(this.hostname);

                var messInfo = '是否删除( ' + this.name + ' )该镜像？';
                var result = confirm(messInfo);
                if (!result) {
                    return;
                } else {
                    $.ajax({
                        url: '/importimages',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            'image_id': this.id,
                            'name': this.name,
                            'action': 'del'
                        },
                        success: function (data) {
                            alert('删除完成');
                            window.location.reload(true);
                        },
                        error: function (data) {
                            alert('删除出错');
                            window.location.reload(true);
                        }

                    });
                }


            });
        });

    </script>

</head>
<body>

<div class="c_file_upload_div" style="display: none">
    <!--<form action="/upload" method="post" enctype="multipart/form-data">-->
    <label style="margin-right: 10px">上传一个本地镜像 :</label>
    <input type="file" value="浏览" name="uploadfile" id="id_file_upload">
    <input type="button" value="上传" onclick="FileUpload()">
    <label class="c_uploadfile_label_info class_hide_mask_div" style="color: green;">正在上传文件,请不要刷新界面 ..</label>

    <!--</form>-->
</div>


<hr>

<div class="c_um_table">
    <table id="idTable" class="c_table">
        <tr class="c_table_head">
            <th class="c_ordinal">序号</th>
            <th class="c_imagesid">镜像ID</th>
            <th class="c_name">名称</th>
            <th class="c_hostname">主机名</th>
            <th class="c_address">大小</th>
            <th class="c_des">描述</th>
            <th class="c_action">操作</th>
        </tr>
        {% for item in allImagesList %}
        <tr class="c_trList">
            <td>{{item.count}}</td>
            <td class="c_td_class">{{item.Id}}</td>
            <td>{{item.RepoTags}}</td>
            <td>{{item.hostname}}</td>
            <td>{{item.Size}}</td>
            <td>{{item.RepoTags}}</td>
            <td class="c_action_td">

                <input name={{item.hostname}}:{{item.RepoTags}} id={{item.Id}} type="button" value="删除"
                       class="c_action_button_del_image c_action_button_sty01">

            </td>
        </tr>
        {% endfor %}

    </table>

</div>


</body>
</html>